<template>
    <div class="quick_body" :style="{'background-color':props.backColor}">
        <div>
            <el-image style="width: 100%; "
                :src="props.image"
                fit="fit" />
        </div>
        <div>
            <div>
                {{ props.text }}
            </div>
            <span :style="{
                'background-color':props.btnColor
            }">
                <el-image :src="props.btnImg" />
            </span>
        </div>
    </div>
</template>

<script setup>
const props = defineProps({
    "image": String,
    "text": String,
    "backColor": String,
    "btnColor": String,
    "btnImg":String
})
</script>

<style scoped lang="scss">
.quick_body {
    width: 414px;
    height: 664px;
    box-sizing: border-box;

    & div:nth-child(2) {
        margin: 30px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 190px;

        &>div {
            color: #fff;
            font-weight: bold;
            font-size: 20px;
        }

        &>span {
            width: 40px;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;

            & .el-image {
                width: 16px;
                height: 16px;
            }
        }
    }
}
</style>